import React, { PureComponent } from 'react'
import { history } from '@umijs/max'
import { Table } from 'antd'
import { BreadcrumbBar, ProTable } from '@/components'
import { getHashParameterByName } from '@/utils/helper'
import styles from './index.less'

export default class OfflineDetail extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      id: getHashParameterByName('id'),
      menus: [{ name: '任务管理' }, { name: '任务详情' }],
      query: {},
      statusArr: ['运行中', '正常', '异常', 'sql语句出错'],
      columns: [
        {
          title: '规则名称', width: '20%', dataIndex: 'ruleName', key: 'ruleName',
        },
        {
          title: '任务执行时间', width: '20%', dataIndex: 'startTime', key: 'startTime',
        },
        {
          title: '任务结束时间 ', width: '20%', dataIndex: 'endTime', key: 'endTime',
        },
        {
          title: '任务状态',
          width: '15%',
          dataIndex: 'status',
          key: 'status',
          render: (text) => <span>{this.state.statusArr[text]}</span>,
        },
        {
          title: '告警数', width: '10%', dataIndex: 'errorNum', key: 'errorNum', ellipsis: true,
        },
      ],
      childColumns: [
        {
          title: '序号',
          dalign: 'center',
          width: '15%',
          render: (text, record, index) => `${index + 1}`,
        },
        {
          title: '告警时间',
          dataIndex: 'updateTime',
          width: '15%',
        },
        {
          title: '告警内容',
          dataIndex: 'warnContent',
          width: '15%',
        },
      ],
    }
  }

  componentDidMount() {
  }

  expandedRowRender = (record, index, indent, expanded) => {
    const { childColumns } = this.state
    return (
      <Table
        key={record.id}
        columns={childColumns}
        dataSource={record.fields || []}
        pagination={false}
      />
    )
  };

  render() {
    const {
      menus, id, query,
    } = this.state
    return (
      <div className={`${styles.page_content_with_breadcrumb} ${styles.page_content_tabs_height}`}>
        <BreadcrumbBar menu={menus} />
        <div className={styles.back_bar}>
          <i className="iconfont icon-zuo" />
          <span onClick={() => { history.push('/dataQuality/taskManagement') }}>任务详情</span>
        </div>
        <div className={styles.page_content}>
          <div style={{ paddingTop: '.24rem' }} className={styles.page_content_right}>
            <ProTable
              rowKey="id"
              columns={this.state.columns}
              expandedRowRender={this.expandedRowRender}
              query={{ jobId: id }}
              border={false}
              url="/api/v1/dataQuality/job/getJobRuleDetail"
            />
          </div>
        </div>
      </div>
    )
  }
}
